<div class="station-image-stairs-wrapper as-station-image-stairs-wrapper container-topic px-0">
  <div class="wrapper position-relative as-stairs-wrapper">
    {% comment %} 内容 {% endcomment %}
    <div class="as-text-content text-content position-absolute top-0 w-100" style="height:250vh;z-index:9">
      <div class="container h-100">
        <div class="flex-center h-100 row">
          <div class="col-lg-8 col-12 text-center text-white">
            <h2 class="display-1 fw-bold mb-0 section-heading">{{ section.settings.heading }}</h2>
            {% comment %} <div class="h4 section-des mt-lg-4 mt-3 mb-0">{{ section.settings.description | replace: '<p>', '<p class="mb-0">' }}</div> {% endcomment %}
            {% comment %} <div class="pics d-lg-flex d-none justify-content-center">
              {%- assign icon_blocks = section.blocks | where: 'type', 'icon' -%}
              {% for item in icon_blocks %}
                <div class="icon-item {% if forloop.first %} me-7 {% endif %}">
                  <picture class="">
                    <img
                      class="object-fit-cover"
                      src="{{ item.settings.icon_desktop | img_url: 'master' }}"
                      alt="{{ item.settings.icon_desktop.alt | escape }}"
                      width="{{ item.settings.icon_desktop.width | divided_by : 2 }}"
                      height="{{ item.settings.icon_desktop.height | divided_by : 2 }}"
                    >
                  </picture>
                </div>
              {% endfor %}
            </div>
            <div class="pics d-lg-none d-flex justify-content-center">
              {%- assign icon_blocks = section.blocks | where: 'type', 'icon' -%}
              {% for item in icon_blocks %}
                <div class="icon-item {% if forloop.first %} me-5 {% endif %}">
                  <picture class="">
                    <img
                      class="object-fit-cover"
                      src="{{ item.settings.icon_mobile | img_url: 'master' }}"
                      alt="{{ item.settings.icon_mobile.alt | escape }}"
                      width="{{ item.settings.icon_mobile.width | divided_by : 2 }}"
                      height="{{ item.settings.icon_mobile.height | divided_by : 2 }}"
                    >
                  </picture>
                </div>
              {% endfor %}
            </div> {% endcomment %}
            <div class="as-trigger-1"></div>
          </div>
        </div>
      </div>
    </div>
    {% comment %} pc {% endcomment %}
    <div class="as-wrapper position-sticky top-0 d-lg-block d-none">
      <div class="as-tv-wrapper tv-wrapper position-sticky top-0">
        <div
          class="position-relative station-banner-video overflow-hidden as-station-full-screen  h-md-adapt-to-screen"
          style="font-size:0px;"
        >
          {% if section.settings.desktop_video_url or section.settings.mobile_video_url %}
            {% render 'lazy-video',
              pc_video: section.settings.desktop_video_url.sources[1].url,
              mob_video: section.settings.mobile_video_url.sources[1].url,
              desktop_poster: section.settings.cover_image_on_desktop,
              mobile_poster: section.settings.cover_image_on_mobile
            %}
          {% else %}
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          {% endif %}
          <div class="as-mask-back mask-back w-100 h-100 position-absolute top-0 bg-black" style="opacity:0;z-index:8" ></div>
        </div>
        {% comment %} pt-8  {% endcomment %}
        <div class="as-tv-stand tv-stand d-flex justify-content-center position-relative">
          <picture class="w-100">
            <img
              class="object-fit-cover w-100"
              src="{{ section.settings.background_image_on_desktop | img_url: 'master' }}"
              alt="{{ section.settings.background_image_on_desktop.alt | escape }}"
            >
          </picture>
          <div class="as-trigger-2"></div>
          {% comment %} 新版 {% endcomment %}
          {% comment %} <div class="absolute-center d-flex justify-content-center">
            <div>
              {% comment %} 1/0.6 = 1.6666666666666667 {% endcomment %}
              {{ section.settings.description2 | replace: '<p>', '<p class="mb-0" style="transform: scale(1.6666666666666667);">' }}
            </div>
          </div> {% endcomment %}

           <div
            class="as-tv-stand-text-content container  row d-flexd justify-content-center opacity-class position-absolute tv-stand-text-content"
          >
            <div class="description scale-des text-center col-8 gray-700">
              {{ section.settings.description2 | replace: '<p>', '<p class="mb-0">' }}
            </div>
          </div>

          
          {% comment %} 旧版 {% endcomment %}
          {% comment %} 父元素缩小0.75 ， 子元素文案反向放大就不会受父元素缩小影响，1/0.75 = 1.3333333333333333 {% endcomment %}
           {% comment %} <div
            class="as-tv-stand-text-content-title container  row d-flexd justify-content-center opacity-class position-absolute tv-stand-text-content"
          >
            <div class="display-3 fw-bold text-center col-8" style="transform:scale(1.3333333333333333);">
              <span class="color-gradual me-4">4K</span>{{ section.settings.heading2 }}
            </div>
          </div> {% endcomment %}
          {% comment %} <div
            class="as-tv-stand-text-content-des container row d-flexd justify-content-center opacity-class position-absolute"
            style="top:104%;"
          >
            <div class="fw-normal h4 text-center col-8 mb-0" style="transform:scale(1.3333333333333333);line-height:36px;">
              {{ section.settings.description2 | replace: '<p>', '<p class="mb-0">' }}
            </div>
          </div> {% endcomment %}
        </div>
      </div>
    </div>

    {% comment %} 移动 {% endcomment %}
    {% comment %} d-flex flex-column justify-content-center {% endcomment %}
    <div class="as-wrapper position-sticky top-0 overflow-hidden d-lg-none d-block" style="height:100vh;">
      <div class="as-tv-wrapper tv-wrapper">
        <div
          style="margin-top:621px"
          class="as-video-wrapper position-relative video-wrapper as-station-full-screen h-md-adapt-to-screen"
        >
          {% if section.settings.desktop_video_url or section.settings.mobile_video_url %}
            {% render 'lazy-video',
              pc_video: section.settings.desktop_video_url.sources[1].url,
              mob_video: section.settings.mobile_video_url.sources[1].url,
              desktop_poster: section.settings.cover_image_on_desktop,
              mobile_poster: section.settings.cover_image_on_mobile
            %}
          {% else %}
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          {% endif %}
          <div class="as-mask-back mask-back w-100 h-100 position-absolute top-0 bg-black" style="opacity:0;z-index:8" ></div>
        </div>
        {% comment %} 看台 {% endcomment %}
        <div class="pt-3 d-flex justify-content-center position-relative as-spectators">
          <picture class="w-100">
            <img
              class="object-fit-cover w-100"
              src="{{ section.settings.background_image_on_mobile | img_url: 'master' }}"
              alt="{{ section.settings.background_image_on_mobile.alt | escape }}"
            >
          </picture>
        </div>
      </div>

      <div class="container tv-stand">
        <div class="container tv-stand-text-content-mobile as-tv-stand-text-content-mobile">
          {% comment %} 新版 {% endcomment %}
          <div class="des mt-3 mb-0 gray-700">
            {{ section.settings.description2 | replace: '<p>', '<p class="mb-0">' }}
          </div>
          {% comment %} 旧版 {% endcomment %}
          {% comment %} <div class="fw-bold title"><span class="color-gradual me-3">4K</span>{{ section.settings.heading2 }}</div>
          <div class="des mt-3 mb-0">
            {{ section.settings.description2 | replace: '<p>', '<p class="mb-0">' }}
          </div> {% endcomment %}
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "station image stairs",
  "class": "station-image-stairs",
  "tag": "section",
  "settings": [
    {
      "type": "header",
      "content": "Banner 1"
    },
    {
      "type": "header",
      "content": "VIDEO"
    },
    {
      "label": "Desktop video",
      "type": "video",
      "id": "desktop_video_url"
    },
    {
      "label": "Mobile video",
      "type": "video",
      "id": "mobile_video_url"
    },
    {
      "type": "image_picker",
      "id": "cover_image_on_desktop",
      "label": "Cover image on desktop"
    },
    {
      "type": "image_picker",
      "id": "cover_image_on_mobile",
      "label": "Cover image on mobile"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "description",
      "default": "<p>Support charging and use at the same time；5000 mAh；5 hours of battery life；ultra-long standby time of more </p>",
      "label": "Description"
    },
    {
      "type": "header",
      "content": "Banner 2"
    },
    {
      "type": "image_picker",
      "id": "background_image_on_desktop",
      "label": "Background image on desktop"
    },
    {
      "type": "image_picker",
      "id": "background_image_on_mobile",
      "label": "Background image on mobile"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "text",
      "id": "heading2",
      "default": "Wireless connections for better casting",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "description2",
      "default": "<p>Rokid Station can be used as a Adapter to cast any screen you want to see in AR glasses and enjoy the big screen.</p>",
      "label": "Description"
    }
  ],
  "blocks": [
    {
      "type": "icon",
      "name": "Icon",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon_desktop",
          "label": "icon desktop"
        },
        {
          "type": "image_picker",
          "id": "icon_mobile",
          "label": "icon mobile"
        }
      ]
    }
  ]
}
{% endschema %}
